<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>赖马</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4803307_bk19qw3y1fh.css"> 
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/people1.css">
</head>
<body>
    <header>
        <div class="w100p flex aic">
            <a href="./index.html">
                <i class="iconfont icon-icon_zuo"></i>
            </a>
            <span>人物详情</span>
        </div>
    </header>

    <main>
        <!-- 预先定义一个容器用于渲染详情 -->
        <div class="xiangqing"></div>
    </main>

    <script src="./js/jquery.js"></script>
    <script src="./js/axios.js"></script>
    <script>
        var peopleObj = {
            // 获取列表数据
            getList() {
                var index = location.href.indexOf('=');
                var id = location.href.slice(index + 1);
                var url = 'http://localhost:3001/peopleList/' + id; 

                axios.get(url).then(function (res) {
                    console.log(res.data);
                    peopleObj.renderDetail(res.data);
                }).catch(function (err) {
                    console.error('请求失败', err);
                });
            },
            // 渲染详情
            renderDetail(data) {
                var htmlStr = `
                <div class="xiangqing-content">
                    <div class="w100p">
                        <img src="${data.imgUrl}" alt="">
                    </div>
                    <div class="bottom bg-fff">
                        <p class="title f22 mb-15">${data.name}</p>
                        <p class="a f14 f888">
                            ${data.introduce}
                        </p>
                    </div>
                </div>
                `;

                // 渲染到预先定义的容器中
                $('.xiangqing').html(htmlStr);
            }
        }
        peopleObj.getList();
    </script>
</body>
</html>